<template>
	<div class="order">
		<div class="cart-header">
			<div class="cart-header-wrap">
				<div class="cart-title-box">
					<div class="cart-title">确认订单</div>
				</div>
			</div>
		</div>
		<div class="card-content">
			<div class="card-head">
				<div class="course-title">商品信息</div>
			</div>
			<div class="card-list">
				<div class="card-item" v-for="item in shopList" :key="item.cartId">
					<div class="course-con">
						<div class="course">
							<img :src="baseUrl+item.imageUrl" alt="" class="course-img">
							<div class="details">
								<div class="course-name">{{ item.title }}</div>
							</div>
						</div>
					</div>
					<div class="price">￥{{ item.price }}</div>
				</div>
			</div>
			<div class="card-total-wrap">
				<div class="card-total">
					<div class="card-count">共{{ shopList.length }}件商品, 商品总金额: </div>
					<div class="card-price-label">￥{{ total }}</div>
				</div>
				<div class="pay-count">
					<div class="price-label">应付: </div>
					<div class="card-price">￥{{ total }}</div>
				</div>
				<div class="submit-order">
					<el-button type="danger" @click="handleSubmit()">提交订单</el-button>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
export default {
	name: 'Order',
	data() { 
		return {
			baseUrl: process.env.VUE_APP_BASE_API,
			//商品列表
			shopList: [],
			//总金额
			total: 0
		}
	},
	mounted() { 
		this.queryOrderShopList();
	},
	methods: {
		/**
		 * 获取订单商品列表
		 */
		queryOrderShopList() { 
			this.shopList = JSON.parse(localStorage.getItem('shopList'));
			this.total = localStorage.getItem('shopTotal');
		},
		/**
		 * 提交订单
		 */
		handleSubmit() { 
			this.$router.push('/payment')
		}
	}
}
</script>

<style lang="scss" scoped>
.order {
	width: 100%;
	.cart-header {
		width: 100%;
		height: 160px;
		background-image: url('~@/assets/images/cart-header-bg.jpg');
		.cart-header-wrap {
			display: flex;
			width: 1230px;
			height: 100%;
			flex-direction: row;
			justify-content: space-between;
			margin: 0 auto;
		}
		.cart-title-box {
			display: flex;
			color: #07111b;
			flex-direction: row;
			height: 115px;
			.cart-title {
				font-size: 32px;
				line-height: 115px;
				margin-right: 25px;
				font-weight: 200;
			}
			.cart-count {
				line-height: 115px;
			}
		}
		.order {
			line-height: 115px;
			color: #5e5e5e;
			font-weight: 200;
			cursor: pointer;
		}
	}
	.card-content {
		width: 1230px;
		padding: 0 36px 32px;
		background-color: #fff;
		margin: -40px auto 0 auto;
		box-shadow: 0 8px 16px 0 rgba(7, 17, 27, .1);
		border-radius: 8px;
		.card-head {
			width: 100%;
			height: 70px;
			display: flex;
			flex-direction: row;
			align-items: center;
			border-bottom: 1px solid #dcdfe6;
			color: #5e5e5e;
		}
		.card-list {
			width: 100%;
			padding: 15px 0;
			color: #5e5e5e;
			.card-item {
				width: 100%;
				display: flex;
				flex-direction: row;
				padding: 20px 0;
				align-items: center;
				background-color: #f3f5f7;
				margin-bottom: 15px;
				.course {
					display: flex;
					flex-direction: row;
					align-items: center;
				}
				.course-con {
					flex: 1;
					padding-left: 20px;
					.course-name {
						font-size: 16px;
						color: #07111b;
						padding-left: 20px;
					}
				}
				.price {
					width: 160px;
					color: #1c1f21;
					font-weight: 600;
					text-align: center;
				}
				.course-img {
					width: 160px;
					height: 90px;
				}
			}
		}
		.card-total-wrap {
			width: 100%;
			display: flex;
			border-top: 1px solid #dcdfe6;
			flex-direction: column;
			align-items: flex-end;
			.card-total {
				display: flex;
				flex-direction: row;
				align-items: center;
				padding: 15px 0;
				.card-count {
					margin-right: 15px;
					color: #07111b;
				}
				.card-price-label {
					color: #07111b;
				}
			}
			.pay-count {
				display: flex;
				flex-direction: row;
				padding-bottom: 15px;
				.price-label {
					margin-right: 15px;
				}
				.card-price {
					font-size: 16px;
					color: #F01414;
					font-weight: 600;
				}
			}
		}
	}
}
</style>